<extend name="Public/base"/>

<block name="body">
    <div class="main-title">
        <h2>设置榜单 【{$bang.date}】 <button class="btn btn-default btn-return" onclick="javascript:history.back(-1);return false;"><i class="glyphicon glyphicon-share-alt"></i> 返 回</button></h2>
    </div>

    <div class="search-form fr cf">
        <div class="sleft">
            <input type="text" name="nickname" url="{:U('search')}" class="search-input" value="{:I('nickname')}" placeholder="搜索用户UID">
            <a class="sch-btn" href="javascript:;" id="search" ><i class="btn-search"></i></a>
        </div>
        <div style=" padding-top: 5px; clear: both;">
            <table id="search_box" style="width: 220px; border: 1px solid #E6E4E4;">
                
            </table>
        </div>
    </div>



    <div class="tab-content">
    <form action="" method="post" class="form">
        <table width="400">
            <tbody>
<!--                 <tr><td><label class="item-label">视频</label></td></tr>
 -->                <tr>
                    <td>
                        <div class="form-item">
<!--                         <label class="item-label"><span class="check-tips"></span></label>
 -->                            <div class="form-item cf edit_sort edit_sort_l form_field_sort" style="width: 400px; height: 400px">
                            <span>参考榜 点击<i class="glyphicon glyphicon-arrow-right"></i> 进行添加</span>
                                <ul class="dragsort" data-group="topUsers" style="height: 350px">
                                    <volist name="topUsers" id="v">
                                        <li title="{$v|get_nickname}" class="getSort">
                                            <em data="{$v}">{$v|get_nickname}</em>
                                            <input type="hidden" value="{$v}"/>
                                            <i class="glyphicon glyphicon-arrow-right sort-add"></i>
                                        </li>
                                    </volist>
                                </ul>
                            </div>
                        </div>

               
                    </td>
                    <td>


                        <div class="form-item">
                          <div class="form-item cf edit_sort edit_sort_l form_field_sort" style="width: 400px; height: 400px">
                            <span>编辑排行 拖动进行排序</span>
                                <ul class="dragsort needdragsort" data-group="uids" style="height: 350px">
                                    <volist name="bang.uids" id="v">
                                        <li title="{$v|get_nickname}" class="getSort">
                                            <em data="{$v}">{$v|get_nickname}</em>
                                            <input type="hidden" name="uids[]" value="{$v}"/>
                                            <i class="glyphicon glyphicon-remove sort-remove"></i>
                                        </li>
                                    </volist>
                                </ul>
                            </div>
                        </div>
 
                    </td>
                </tr>
            </tbody>
        </table>
        <br><br>
        <div class="form-item form-group form-action">
            <input type="hidden" name="id" value="{$bang.id}">
            <button class="btn submit-btn ajax-post btn-success btn-block" type="submit" target-form="form">确 定</button>
            <!-- <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button> -->
        </div>
    </form>
    </div>
</block>

<block name="script">
    <script type="text/javascript" src="__STATIC__/jquery.dragsort-0.5.1.min.js"></script>
    <script type="text/javascript">
 
        //导航高亮
        highlight_subnav('{:U('index')}');
        showTab();
        $(function(){
            $(".needdragsort").dragsort({
                 dragSelector:'li',
                 placeHolderTemplate: '<li class="draging-place">&nbsp;</li>',
                 dragBetween:true,  //允许拖动到任意地方
                 dragEnd:function(){
                     var self = $(this);
                     self.find('input').attr('name', self.closest('ul').data('group') + '[]');
                 }
             });
            $(document).on('click', '.sort-remove', function(){
                $(this).parent().remove();
            });
            $(document).on('click','.sort-add', function(){
                var title = $(this).parent().find('em').html();
                var id  = $(this).parent().find('input').val();

                var ids_input = $('.needdragsort').find('input');
                var is_do = true;
                ids_input.each(function(i){
                    if ( parseInt($(this).val()) == parseInt(id) )
                    {
                        is_do = false;
                    }
                });
                if (!is_do)
                {
                    return;
                }
                var key = $(".needdragsort").data('group');
                var html = '<li title="'+title+'" class="getSort"><em data="'+id+'">'+title+'</em><input type="hidden" name="uids[]" value="'+id+'"/><i class="glyphicon glyphicon-remove sort-remove"></i></li>';
                $(".needdragsort").append(html);     
            });
        })

    $('input[name=nickname]').keyup(function(){
        var url = $(this).attr('url');
        var nickname = $(this).val();
        var _box = $('#search_box');
        _box.empty();
        $.post(url, {nickname: nickname}, function(item){
            $.each(item, function(k, v){
                _box.append('<tr><td>'+v.uid+'</td><td>'+v.nickname+'</td><td><a href="javascript:addTo('+v.uid+', \''+v.nickname+'\')">添加到榜中</a></td></tr>');
            });
           
        });
         
    });

    function addTo(uid, nickname){
        var html = '<li title="'+nickname+'" class="getSort"><em data="'+uid+'">'+nickname+'</em><input type="hidden" name="uids[]" value="'+uid+'"/><i class="glyphicon glyphicon-remove sort-remove"></i></li>';
        $(".needdragsort").prepend(html);
    }

    </script>
</block>
